<template>
  <div class="player">
    <!-- 背景图 -->
    <div class="bg"></div>
    <!-- 遮罩层 -->
    <div class="layer">

      <div class="wrapper">

        <div class="box">
          <div class="top" v-show="displayList">
            <div class="left-part">
              <!-- 一排操作按钮 -->
              <ul class="opt-group">
                <li>
                  <button type="button"><i class="favor"></i>收藏</button>
                </li>

                <li>
                  <button type="button"><i class="add"></i>添加到</button>
                </li>

                <li>
                  <button type="button"><i class="download"></i>下载</button>
                </li>

                <li>
                  <button type="button"><i class="delete"></i>删除</button>
                </li>

                <li>
                  <button type="button"><i class="clear"></i>清空列表</button>
                </li>

              </ul>

              <!-- <table class="song-list">
                <tr class="table-title">
                  <th width="8%">
                    <div class="checkbox">
                      <input type="checkbox">
                    </div>
                    
                  </th>
                  <th>歌曲</th>
                  <th width="30%">歌手</th>
                  <th width="20%">时长</th>
                </tr>
                <tr class="bottom-line">
                  <td>
                    <div class="checkbox">
                      <input type="checkbox">
                      <i class="tick"></i>
                    </div>
                    <img src="../../images/wave.gif" class="wave">
                    </td>
                  <td>爱的魔法</td>
                  <td>金莎</td>
                  <td>03:11</td>
                </tr>
              </table> -->

              <div class="song-table">
               <table class="song-list">
                <tr class="table-title">
                  <th width="8%">
                    <div class="checkbox">
                      <input type="checkbox">
                    </div>
                  </th>
                  <th>歌曲</th>
                  <th width="30%">歌手</th>
                  <th width="20%">时长</th>
                </tr>
                <tr class="bottom-line" v-for="(item,index) in songs" :key="index">
                  <td>
                    <div class="checkbox" :class="{'selected':item.selected == true}">
                      <input type="checkbox" @click="item.selected=true">
                      <i class="tick" v-show="item.selected" @click="item.selected=false"></i>
                    </div>
                    <img src="../../images/wave.gif" class="wave">
                    </td>
                  <td>
                    <span>{{item.songname}}</span>
                    <div class="opt-box opt-icons">
                      <i class="icon-play"></i>
                      <i class="icon-add"></i>
                      <i class="icon-share"></i>
                    </div>
                  </td>
                  <td>{{item.singer}}</td>
                  <td>
                    <span class="songtime">{{item.time}}</span>
                     <div class="opt-box opt-icons2">
                      <i class="icon-delete"></i>
                    </div>
                  </td>
                </tr>
              </table>
            </div>

            </div>

            <div class="right-part">
              <div class="singer">
                <img src="../../images/jinsha.jpg" class="singer-avatar">
                <!-- <img src="../../images/player_cover.png" class="singer-avatar"> -->
                <img src="../../images/album_cover_player.png" class="album">
              </div>

              <div class="key-index">
                <p>歌曲名: <span class="key">爱的魔法</span></p>
                <p>歌手名: <span class="key">金莎</span></p>
                <p>专辑名: <span class="key">他不爱我</span></p>
              </div>

              <!-- 歌词部分 -->
              <div class="lyric">
                歌词部分...
              </div>
            </div>

          </div>

          <!-- 纯净模式 -->
          <div class="pure" v-show="displayList == false">
            <div class="lyric-box">
              <p data-id="line_3" class="">确定</p>
              <p data-id="line_4">其实还不确定</p>
              <p data-id="line_5">只是四目相对有心悸</p>
              <p data-id="line_6">不见你会想你</p>
              <p data-id="line_7">在人群中找你</p>
              <p data-id="line_8">找到后又假装不看你</p>
              <p data-id="line_9">她们说</p>
              <p data-id="line_10">你有点坏</p>
              <p data-id="line_11">追你的女生都很伤心</p>
              <p data-id="line_12">可是我</p>
              <p data-id="line_13">永不会追</p>
              <p data-id="line_14">我要让你忍不住动心</p>
            </div>
          </div>

          <!-- 底部 -->
          <div class="bottom clearfix">
            <div class="play-group">
              <i class="play-prev"></i>
              <i class="play-toggle"></i>
              <i class="play-next"></i>
            </div>

            <div class="play-step">
              <div class="current-song">
                <p class="left-key"><span class="key">爱的魔法</span> - <span class="key">金莎</span></p>
                <p class="right-key">00:14 / 03:11</p>
              </div>
              <div class="step">
                <div class="pass">
                  <div class="point"></div>
                </div>
              </div>
              
            </div>

            <div class="mode-group">
              <i class="play-mode"></i>
              <i class="favor"></i>
              <i class="download"></i>
              <i class="comment"></i>
              <i class="display-mode" @click="displayList = !displayList"></i>
              <i class="voice"></i>
              <div class="voice-control">
                <div class="long">
                  <div class="pass">
                    <div class="point"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>


        </div>


      </div>

    </div>

  </div>
</template>

<script type="text/ecmascript-6">
import songs from "@/utils/song";

export default {
  data() {
    return {
      songs: [],
      displayList: true
    };
  },
  created() {
    this.initSongList();
  },
  methods: {
    initSongList(){
      this.songs = songs;
      this.songs.forEach((item) => {
        this.$set(item, 'selected', false)
      })
    }
  }
};
</script>

<style lang="less">
@import "./player.less";
</style>
